<template>
  <div id="orderDetail">
    <div class="sharecover" v-show="Issharecover" @click="sharecoverBtn"></div>
    <!--二维码分享-->
    <div class="code_box" v-show="Iscodebox">
      <div ref="qrcode" class="qrcode"></div>
      <p class="qrcode_text">长按二维码进行分享</p>
    </div>
    <!--微信分享-->
    <div v-show="Issharebox" class="share_box">
      <img src="@/assets/imgs/share_right.png" />
      <p>点击右上角按钮发送给微信好友或分享到微信朋友圈</p>
    </div>
    <amap ref="map" :no-auto-zoom="true" @complete="onMapComplete"></amap>
    <div class="top_bar">
      <top-bar :title="title" :showBack="false">
        <md-icon slot="left" class="back_btn" name="snyc_nav_fh" @click="goMyAllot"></md-icon>
      </top-bar>
      <!--订单头部信息-->
      <div class="orderTop" v-show="IsOrderTop">
        <p>
          <span class="gonggao_box">
            <md-icon name="gonggao_icon" slot="left" class="gonggao_icon"></md-icon>
          </span>
          <span class="gonggao_text" v-html="tripTipText"></span>
          <span class="guanbi_box" @click="closeTop">
            <md-icon name="guanbi" slot="left" class="guanbi"></md-icon>
          </span>
        </p>
        <!-- <p>
                    <span class="gonggao_box" :class="{gonggaoboxative:isgonggaoboxative}">
                        <md-icon name="gonggao_icon" slot="left" class="gonggao_icon"></md-icon>
                    </span>
                    <span class="gonggao_text" v-html="tripTipText"></span>
                    <span class="guanbi_box" :class="{guanbiboxative:isguanbiboxative}" @click="closeTop">
                        <md-icon name="guanbi" slot="left" class="guanbi"></md-icon>
                    </span>
                </p>
        <div style="clear:both"></div>-->
      </div>
    </div>
    <!--订单信息-->
    <div class="order_information_box" v-show="IsOrder">
      <p class="dingwei" @click="dingweiBtn">
        <img src="@/assets/imgs/dingwei@2x.png" />
      </p>
      <div class="order_information">
        <ul class="orderinformation_list">
          <li>
            <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
            <span>
              {{getTime}}
              <em>{{getOrderInfoData?getOrderInfoData.order_type:''}}</em>
              <em v-if="(getOrderInfoData?getOrderInfoData.order_type:'') == '拼车'">{{getOrderInfoData?getOrderInfoData.order_num:''}}人</em>
              <em v-if="(getOrderInfoData?getOrderInfoData.order_type:'') == '包车'">{{getOrderInfoData?getOrderInfoData.car_type:''}}</em>
            </span>
          </li>
          <li>
            <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
            <span>{{getstartRoute}} {{getorigin}}</span>
          </li>
          <li>
            <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
            <span>{{getendRoute}} {{getdestination}}</span>
          </li>
          <li v-show="Isremarks">
            <md-icon name="dt_bz" slot="left" class="snkc_xcqx_time"></md-icon>
            <span>{{getOrderInfoData?getOrderInfoData.remarks:''}}</span>
          </li>
          <li v-show="speedstatus">
            <md-icon name="Fill" slot="left" class="snkc_xcqx_time"></md-icon>
            <span>走高速</span>
          </li>
          <li v-show="Isorder_type">
            <md-icon name="snkc_xcqx_dj" slot="left" class="snkc_xcqx_time"></md-icon>
            <span>{{getOrderInfoData?getOrderInfoData.passenger_name:''}} {{userPhone}}</span>
          </li>
        </ul>
        <div class="orderinformation_bottom">
          <ul>
            <li @click="shareBtn">
              <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
            </li>
            <li @click="callCustomer">
              <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
            </li>
            <li @click="tripCancelBtn">
              <md-icon name="quxiao_icon" slot="left" class="quxiao_icon"></md-icon>取消订单
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--司机信息-->
    <div class="driver_information" v-show="IsDriver">
      <p class="safe_box">
        <span @click="dingweiBtn">
          <img src="@/assets/imgs/dingwei@2x.png" />
        </span>
        <span @click="safeBtn" class="safe_box_img">
          <img src="@/assets/imgs/safe_icon@2x.png" />
        </span>
      </p>
      <div class="driver_information_box">
        <div class="show_trip" @click="showTripDriverInformation">
          <p></p>
          <p></p>
        </div>
        <div class="driver_box">
          <div class="driver_photo">
            <driver-avatar :url="driver_photoImg" :show-text="superDriver" :text="superDriverText"></driver-avatar>
            <!-- <p>
                            <img :src="driver_photoImg" />
                        </p>
            <p class="super_driver" v-show="superDriver">明星司机</p>-->
          </div>
          <div class="driver_car">
            <p>
              <span class="driver-name">{{getOrderInfoData?getOrderInfoData.driver_name:''}}</span>
              <span class="stars">
                <i :class="{'active':starsone}"></i>
                <i :class="{'active':starstwo}"></i>
                <i :class="{'active':starsthree}"></i>
                <i :class="{'active':starsfour}"></i>
                <i :class="{'active':starsfive}"></i>
              </span>
              <span class="dirver-score">{{getOrderInfoData?getOrderInfoData.driver_level:''}}</span>
            </p>
            <p>
              <span class="car-number">{{getOrderInfoData?getOrderInfoData.driver_number:''}}</span>
              <span class="car-brand">{{getOrderInfoData?getOrderInfoData.driver_carColor:''}} {{getOrderInfoData?getOrderInfoData.driver_car:''}}</span>
            </p>
          </div>
          <div class="driver_phone">
            <!-- <span><img src="@/assets/imgs/snyc_jjz_tel.png"></span> -->
            <span @click="callDriver">
              <img src="@/assets/imgs/phone_ico.png" />
            </span>
          </div>
        </div>
        <div style="clear:both"></div>
        <div class="orderinformation_box" v-show="IsshowTripInformation">
          <ul class="orderinformation_list">
            <li>
              <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
              <span>
                {{getTime}}
                <em>{{getOrderInfoData?getOrderInfoData.order_type:''}}</em>
                <em v-if="(getOrderInfoData?getOrderInfoData.order_type:'') == '拼车'">{{getOrderInfoData?getOrderInfoData.order_num:''}}人</em>
                <em v-if="(getOrderInfoData?getOrderInfoData.order_type:'') == '包车'">{{getOrderInfoData?getOrderInfoData.car_type:''}}</em>
              </span>
            </li>
            <li>
              <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
              <span>{{getOrderInfoData?getOrderInfoData.start_route:''}} {{getorigin}}</span>
            </li>
            <li>
              <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
              <span>{{getOrderInfoData?getOrderInfoData.end_route:''}} {{getdestination}}</span>
            </li>
            <li v-show="Isremarks">
              <md-icon name="dt_bz" slot="left" class="snkc_xcqx_time"></md-icon>
              <span>{{getOrderInfoData?getOrderInfoData.remarks:''}}</span>
            </li>
            <li v-show="speedstatus">
              <md-icon name="Fill" slot="left" class="snkc_xcqx_time"></md-icon>
              <span>走高速</span>
            </li>
            <li v-show="Isorder_type">
              <md-icon name="snkc_xcqx_dj" slot="left" class="snkc_xcqx_time"></md-icon>
              <span>{{getOrderInfoData?getOrderInfoData.passenger_name:''}} {{userPhone}}</span>
            </li>
          </ul>
        </div>
        <div v-show="IssameUsers">
          <div class="Colleague_per" v-if="sameUsers">
            <ul>
              <li>
                <p>同行乘客</p>
              </li>
              <li v-for="(item,index) in getOrderInfoData?getOrderInfoData.allotSameUsers:''" :key="index">
                <img :src="urlImg + item.userHeadpath" />
              </li>
            </ul>
          </div>
          <div v-else class="colleague_no">
            <p>
              <img src="@/assets/imgs/chixuxunzhao_icon.png" />持续为您寻找拼友
            </p>
          </div>
        </div>
        <div style="clear:both"></div>
        <div class="orderinformation_bottom" style="margin-top:10px;">
          <ul>
            <li @click="shareBtn">
              <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
            </li>
            <li @click="complaintsBtn">
              <md-icon name="tousu_icon" slot="left" class="quxiao_icon"></md-icon>
              {{complaints}}
            </li>
            <li @click="callCustomer">
              <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
            </li>
            <li v-show="IscancelOrder" @click="tripCancelBtn">
              <md-icon name="quxiao_icon" slot="left" class="quxiao_icon"></md-icon>取消订单
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--行程结束-->
    <div class="end_order" v-show="IsEndOrder">
      <p class="dingwei" @click="dingweiBtn">
        <img src="@/assets/imgs/dingwei@2x.png" />
      </p>
      <div class="end_order_box">
        <div class="driver_box">
          <div class="driver_photo">
            <driver-avatar :url="driver_photoImg" :show-text="superDriver" :text="superDriverText"></driver-avatar>
          </div>
          <div class="driver_car">
            <p>
              <span class="driver-name">{{getOrderInfoData?getOrderInfoData.driver_name:''}}</span>
              <span class="stars">
                <i :class="{'active':starsone}"></i>
                <i :class="{'active':starstwo}"></i>
                <i :class="{'active':starsthree}"></i>
                <i :class="{'active':starsfour}"></i>
                <i :class="{'active':starsfive}"></i>
              </span>
              <span class="dirver-score">{{getOrderInfoData?getOrderInfoData.driver_level:''}}</span>
            </p>
            <p>
              <span class="car-number">{{getOrderInfoData?getOrderInfoData.driver_number:''}}</span>
              <span class="car-brand">{{getOrderInfoData?getOrderInfoData.driver_carColor:''}} {{getOrderInfoData?getOrderInfoData.driver_car:''}}</span>
            </p>
          </div>
          <div class="driver_phone">
            <!-- <span><img src="@/assets/imgs/snyc_jjz_tel.png"></span> -->
            <span>
              <img src="@/assets/imgs/snyc_jjz_tel_no.png" />
            </span>
          </div>
        </div>
        <div style="clear:both"></div>
        <div class="endOrder_bottom">
          <ul>
            <li @click="complaintsBtn">
              <md-icon name="tousu_icon" slot="left" class="quxiao_icon"></md-icon>
              {{complaints}}
            </li>
            <li @click="callCustomer">
              <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
            </li>
          </ul>
        </div>
        <div style="clear:both"></div>
        <div class="endOrdermoney">
          <p class="money_alt">￥{{getOrderInfoData?getOrderInfoData.last_amt:''}}</p>
          <p class="endOrdercharges" @click="chargesBtn">
            费用明细
            <md-icon name="wdqb-more" slot="left" class="quxiao_icon"></md-icon>
          </p>
        </div>
        <div class="driver_evaluate">
          <p @click="getEvaluate">
            {{driverEvaluate}}
            <md-icon name="wdqb-more" slot="left" class="quxiao_icon"></md-icon>
          </p>
        </div>
      </div>
    </div>
    <!--行程取消-->
    <div class="order_information_box" v-show="IsOrdercancel">
      <div class="order_information">
        <ul class="orderinformation_list">
          <li>
            <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
            <span>
              {{getTime}}
              <em>{{getOrderInfoData?getOrderInfoData.order_type:''}}</em>
              <em v-if="(getOrderInfoData?getOrderInfoData.order_type:'') == '拼车'">{{getOrderInfoData?getOrderInfoData.order_num:''}}人</em>
              <em v-if="(getOrderInfoData?getOrderInfoData.order_type:'') == '包车'">{{getOrderInfoData?getOrderInfoData.car_type:''}}</em>
            </span>
          </li>
          <li>
            <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
            <span>{{getstartRoute}} {{getorigin}}</span>
          </li>
          <li>
            <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
            <span>{{getendRoute}} {{getdestination}}</span>
          </li>
          <li v-show="Isremarks" style="width:520px;">
            <md-icon name="dt_bz" slot="left" class="snkc_xcqx_time"></md-icon>
            <span>{{getOrderInfoData?getOrderInfoData.remarks:''}}</span>
          </li>
          <li v-show="speedstatus">
            <md-icon name="Fill" slot="left" class="snkc_xcqx_time"></md-icon>
            <span>走高速</span>
          </li>
          <li v-show="Isorder_type">
            <md-icon name="snkc_xcqx_dj" slot="left" class="snkc_xcqx_time"></md-icon>
            <span>{{getOrderInfoData?getOrderInfoData.passenger_name:''}} {{userPhone}}</span>
          </li>
          <p class="cancelmoney" v-if="bottomCancleType">
            ￥{{getOrderInfoData?getOrderInfoData.last_amt:''}}
            <md-icon name="xc_question" slot="left" class="xc_question" @click="chargesBtn"></md-icon>
          </p>
          <p class="cancelmoney" v-else>
            ￥{{getOrderInfoData?getOrderInfoData.order_amt:''}}
            <md-icon name="xc_question" slot="left" class="xc_question" @click="chargesBtn"></md-icon>
          </p>
        </ul>
        <div class="orderinformation_bottom" v-if="bottomCancleType">
          <p class="cancel_img">
            <img :src="cancelImg" />
          </p>
          <p class="cancel_text" v-html="cancelText"></p>
          <p class="cancel_Charge" v-html="cancelCharge"></p>
        </div>
        <div class="orderinformation_bottom" v-else>
          <p class="cancel_img">
            <img :src="cancelImg" />
          </p>
          <p class="cancel_text">订单已取消</p>
        </div>
      </div>
    </div>
    <!--评价司机-->
    <md-popup v-model="evalutePop" position="bottom" :mask-closable="false">
      <md-popup-title-bar title="匿名评价" cancel-text="关闭" @cancel="hidePopEvalute()"></md-popup-title-bar>
      <div class="rules_ct">
        <div class="driver_evaluate">
          <div class="starWrap">
            <img :src="level>index?stara:starb" v-for="(item,index) in levelList" :key="index" @click="getlevel(index)" />
            <div class="starText" v-show="IsevaluateStarText">选择星级评价</div>
            <p v-show="IsevaluateResult">{{evaluateResulttext}}</p>
          </div>
          <div v-show="IsevaluationList">
            <ul class="evaluationList evaluationList_one">
              <li
                v-for="(item, index) in evaluationList"
                :key="index"
                @click="getevaluationList(index,item)"
                :class="{'evaluation-active':evaluationArr[index]}"
                ref="menuItem"
              >{{item.levelLabelName}}</li>
            </ul>
          </div>
          <div style="clear:both"></div>
        </div>
        <p class="evaluationBtn" v-show="IsevaluationBtn" @click="evaluationBtn">匿名提交</p>
      </div>
    </md-popup>
    <!--查看评价-->
    <md-popup v-model="lookEvalutePop" position="bottom" :mask-closable="false">
      <md-popup-title-bar title="匿名评价" cancel-text="关闭" @cancel="hidePopLookEvalute()"></md-popup-title-bar>
      <div class="look_rules_ct">
        <div class="driver_evaluate">
          <div class="starWrap">
            <img :src="lookLevel>index?stara:starb" v-for="(item,index) in levelList" :key="index" />
            <p>{{lookEvaluateResulttext}}</p>
          </div>
          <div style="clear:both"></div>
          <div v-show="lookIsevaluationList">
            <ul class="evaluationList">
              <li v-for="(item, index) in lookEvaluationList" :key="index" class="evaluation-active">{{item}}</li>
            </ul>
          </div>
          <div style="clear:both"></div>
        </div>
      </div>
    </md-popup>
  </div>
</template>

<script>
import '@/assets/svgs/snyc_nav_fh.svg';
import '@/assets/svgs/gonggao_icon.svg';
import '@/assets/svgs/guanbi.svg';
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/snkc_xcqx_time.svg';
import '@/assets/svgs/dt_bz.svg';
import '@/assets/svgs/snkc_xcqx_dj.svg';
import '@/assets/svgs/xc_question.svg';
import '@/assets/svgs/share_icon.svg';
import '@/assets/svgs/kefu_icon.svg';
import '@/assets/svgs/quxiao_icon.svg';
import '@/assets/svgs/tousu_icon.svg';
import '@/assets/svgs/wdqb-more.svg';
import '@/assets/svgs/Fill.svg';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import QRCode from 'qrcodejs2';
import http from '@/common/http';
import Config from '@/common/config';
import weixinUtils from '@/common/weixinUtils';
import { Tabs, Icon, Dialog, Popup, PopupTitleBar, Toast } from 'mand-mobile';
import MapTool from '@/components/map/MapTool';
import DriverAvatar from '@/components/DriverAvatar';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import { DRIVER_IN_ALLOT_TOPIC, DRIVER_POSITION_TOPIC } from '@/store/mqtt.topics';
import Utils from '@/common/pakjUtils';
import XBack from 'xback';
const MARKER_MOVE_SPEED = 45;
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'order-detail',
  data() {
    return {
      showSafe: true,
      urlImg: Config.ossImgUrl,
      IssameUsers: false,
      lookEvalutePop: false,
      evaluationArr: [],
      evaluationnewArr: [],
      IsevaluationBtn: false,
      IsevaluateResult: false,
      IsevaluationList: false,
      evaluateResulttext: '',
      lookIsevaluationList: false,
      lookEvaluationList: [],
      lookEvaluateResulttext: '',
      level: 0,
      lookLevel: '',
      levelList: [0, 1, 2, 3, 4],
      stara: require('@/assets/imgs/xcxq_icon_xing_light@2x.png'), // 亮星星
      starb: require('@/assets/imgs/xcxq_icon_xing_dark@2x.png'), // 暗星星
      IsevaluateStarText: true,
      evaluationList: [],
      order_id: '',
      title: '',
      superDriver: '', // 是否是明星司机
      superDriverText: '',
      IsshowTripInformation: false,
      IsOrder: '', // 是否显示订单信息
      IsDriver: '', // 是否显示司机信息
      IsOrdercancel: '',
      pingjia: '', // 评价状态
      evalutePop: false,
      complaintStatus: '', // 投诉状态
      driverEvaluate: '',
      complaints: '',
      IsEndOrder: '',
      IsOrderTop: true,
      tripTipText: '',
      driver_photoImg: '',
      IscancelOrder: true, // 是否取消订单
      startPoint: '',
      endPoint: '',
      driverPosition: '',
      userPosition: '',
      cancelImg: '',
      starsone: false,
      starstwo: false,
      starsthree: false,
      starsfour: false,
      starsfive: false,
      timerOrder: '',
      IsshowOrderTip: true,
      IsshowOrderTipOne: true,
      IsshowOrderTipTwo: true,
      IsshowOrderTipThree: true,
      IsshowOrderTipFour: true,
      IsshowOrderTipFive: true,
      shareTripUrl: '',
      Iscodebox: false,
      Issharebox: false,
      Issharecover: false,
      qrcode: '',
      Isorder_type: true, // 是否显示乘车人
      isgonggaoboxative: true,
      isguanbiboxative: true,
      IsgetGeolocation: true,
      speedstatus: true,
      mapInstance: null,
      Isremarks: true, // 是否显示大件行李
      hasPathNavigator: false,
      currentStatus: undefined,
      hasMqtt: false,
      directPolyline: null,
      startMarker: null,
      startTextMarker: null,
      destMarker: null,
      destTextMarker: null,
      tipIndowWindow: null,
      bottomCancleType: true,
      xBack: null,
      sameStartPosition: [],
      sameDestPosition: [],
      sameUsers: false,
      meetOthersStatus: '', // 是否有同行乘客 0 没有 1 有
      actualStatus: '' // 订单的实时状态 （0：未接，1：正在接，2：已上车，3：正在送，4：已下车,5：司机已到达）
    };
  },
  components: {
    [MapTool.name]: MapTool,
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [TopBar.name]: TopBar,
    [DriverAvatar.name]: DriverAvatar
  },
  created() {
    Loading.show();
    this.xBack = XBack.init(window, event => {
      // this.xBack.back();
      // this.xBack.uninit();
      this.goMyAllot();
    });
  },
  mounted() {
    // 获取行程分享信息
    this.getshareTrip();
  },
  beforeDestroy() {
    clearInterval(this.timerOrder);
    this.timerOrder = null;
    this.$refs.map.clearWatchLocation(); // 删除定位
    this.$store.commit('closeMqtt');
  },
  methods: {
    hidePopEvalute() {
      this.evalutePop = false;
      this.IsEndOrder = true;
    },
    hidePopLookEvalute() {
      this.lookEvalutePop = false;
      this.IsEndOrder = true;
    },
    // 手动获取定位
    dingweiBtn() {
      this.$refs.map.updateCurrentPosition();
    },
    // 返回到行程列表页面
    goMyAllot() {
      Loading.hide();
      this.$router.push({
        name: 'MyAllot'
      });
    },
    onMapComplete(map) {
      this.mapInstance = map;
      this.getOrderDetail();
      // 轮询后台请求行程详情接口
      this.timerOrder = setInterval(() => {
        this.getOrderDetail();
      }, 5000);
    },
    getshareTrip() {
      let params = {
        order_no: this.$route.query.orderno,
        type: '1'
      };
      Loading.show();
      http.post('/pakj/order/getShareOrderUrl', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.shareTripUrl = res.data.data.shareUrl;
          this.getshareConfig(res.data.data.shareUrl, res.data.data.shareTitle, res.data.data.shareDesc);
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    getshareConfig(shareUrl, shareTitle, shareDesc) {
      weixinUtils
        .wxConfig([
          'onMenuShareTimeline', // 分享到朋友圈接口
          'onMenuShareAppMessage', //  分享到朋友接口
          'onMenuShareQQ', // 分享到QQ接口
          'onMenuShareWeibo' // 分享到微博接口
        ])
        .then(() => {
          let shareData = {
            imgUrl: 'https://img.padj.group/pakj_logo.png', // 分享显示的缩略图地址
            link: shareUrl, // 分享地址
            desc: shareTitle, // 分享描述
            title: shareDesc, // 分享标题
            success: () => {
              Toast({
                icon: 'circle-right',
                content: '分享成功',
                position: 'bottom'
              });
              this.sharecoverBtn();
            }
          };
          wx.onMenuShareTimeline(shareData);
          wx.onMenuShareAppMessage(shareData);
          wx.onMenuShareQQ(shareData);
          wx.onMenuShareWeibo(shareData);
        })
        .catch(reason => {
          // config信息验证失败会执行error函数，如签名过期导致验证失败
          // 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看
          // 对于SPA可以在这里更新签名
          // alert("好像出错了")
        });
    },
    // 分享行程
    shareBtn() {
      this.Issharecover = true;
      // 判断是微信还是h5中
      if (Utils.isWeixinBroswer()) {
        //  微信中
        this.Issharebox = true;
      } else {
        this.Iscodebox = true;
        if (!this.qrcode) {
          this.qrcode = new QRCode(this.$refs.qrcode, {
            width: 120,
            height: 120, // 高度
            text: this.shareTripUrl // 二维码链接
          });
        }
      }
    },
    sharecoverBtn() {
      this.Issharecover = false;
      this.Iscodebox = false;
      this.Issharebox = false;
    },
    getOrderDetail() {
      // 获取订单详情
      if (this.$route.query.orderno) {
        this.getOrderInfo(this.$route.query.orderno).then(() => {
          Loading.hide();
          // 根据字段设置起始点和终点
          this.startPoint = this.strArray2NumArray(decryptByDESModeEBC(this.getOrderInfoData.origin_coord).split(','));
          this.endPoint = this.strArray2NumArray(decryptByDESModeEBC(this.getOrderInfoData.dest_coord).split(','));
          if (this.getOrderInfoData.path && this.getOrderInfoData.path.length > 0) {
            if (!this.hasMqtt) {
              this.driverPosition = this.getOrderInfoData.path[0];
              console.log('从接口获取了当前司机的位置：', this.driverPosition);
            }
          }
          let momstart = moment(this.getOrderInfoData.travel_time, 'x');
          let travelTimeStr = momstart.calendar(null, {
            sameDay: '[今天] HH:mm',
            nextDay: '[明天] HH:mm',
            nextWeek: 'dddd HH:mm',
            lastDay: '[昨天] HH:mm',
            lastWeek: '[上] ddd HH:mm',
            sameElse: 'MMMDo HH:mm'
          });
          let momstartPlan = moment(this.getOrderInfoData.plan_travel_time, 'x');
          let travelTimeStrPlan = momstartPlan.calendar(null, {
            sameDay: '[今天] HH:mm',
            nextDay: '[明天] HH:mm',
            nextWeek: 'dddd HH:mm',
            lastDay: '[昨天] HH:mm',
            lastWeek: '[上] ddd HH:mm',
            sameElse: 'MMMDo HH:mm'
          });
          this.driver_photoImg =
            Config.ossImgUrl + this.getOrderInfoData.driver_show
              ? Config.ossImgUrl + this.getOrderInfoData.driver_show
              : require('@/assets/imgs/snyc_tx.png'); // 司机头像
          // 点亮司机评分星星
          var driverLevel = parseInt(this.getOrderInfoData.driver_level);
          if (driverLevel === 1) {
            this.starsone = true;
          } else if (driverLevel === 2) {
            this.starsone = true;
            this.starstwo = true;
          } else if (driverLevel === 3) {
            this.starsone = true;
            this.starstwo = true;
            this.starsthree = true;
          } else if (driverLevel === 4) {
            this.starsone = true;
            this.starstwo = true;
            this.starsthree = true;
            this.starsfour = true;
          } else if (driverLevel === 5) {
            this.starsone = true;
            this.starstwo = true;
            this.starsthree = true;
            this.starsfour = true;
            this.starsfive = true;
          }
          // 行程状态
          this.currentStatus = this.getOrderInfoData.order_status_id;
          // 是否有同行乘客
          this.meetOthersStatus = this.getOrderInfoData.isMeetOthers;
          // 订单实时状态
          this.actualStatus = this.getOrderInfoData.actualStatus;
          if (this.currentStatus === '0') {
            // 待派单
            this.title = '待派单';
            document.title = '待派单';
            this.IsOrder = true;
            this.IsDriver = false;
            this.IsOrdercancel = false;
            this.tripTipText =
              "预约成功：我们会在您预约的最晚时间<em style='color:#FF6917;font-style:normal'>30分钟</em>前指派司机，如您乘车时与本次订单人数不符（含儿童）我们有权对本次行程进行调整，如有问题请点击下方联系客服";
            if (this.IsshowOrderTip) {
              // 上车点marker
              this.showStartMarker();
              // 下车点marker
              // this.$refs.map.addEndMarker(this.endPoint, this.getOrderInfoData.destination);
              Dialog.alert({
                title: '温馨提示',
                content:
                  '您好！您预约的' +
                  travelTimeStr +
                  '【' +
                  this.getOrderInfoData.start_route +
                  '-' +
                  this.getOrderInfoData.end_route +
                  '】的订单我司会按派单时间为您安排车辆，请您放心。届时司机会按照您约定的时间范围及地址接驾，请您提前做好出行准备，如有任何问题，可拨打客服电010-59716713咨询。',
                confirmText: '知道了'
              });
              this.IsshowOrderTip = false;
              this.$refs.map.setCenter(this.startPoint);
            }
            this.isgonggaoboxative = true;
            this.isguanbiboxative = true;
          } else if (this.currentStatus === '1') {
            // 派单成功
            this.title = '待接驾';
            document.title = '待接驾';
            this.IsOrder = false;
            this.IsDriver = true;
            this.IsOrdercancel = false;
            this.tripTipText =
              "派单成功：已为您指派司机，出发时间<em style='color:#FF6917;font-style:normal'>" +
              travelTimeStrPlan +
              '</em>，请提前做好出行准备';
            this.isgonggaoboxative = true;
            this.isguanbiboxative = true;
            if (this.IsshowOrderTipOne) {
              // 上车点marker
              this.showStartMarker();
              // 下车点marker
              // this.$refs.map.addEndMarker(this.endPoint, this.getOrderInfoData.destination);
              // 同行乘客起点marker
              this.sameStartMarker();
              // 同行乘客终点marker
              this.sameEndMarker();
              this.IsshowOrderTipOne = false;
              this.$refs.map.setCenter(this.startPoint);
            }
          } else if (this.currentStatus === '2') {
            // 订单已完成
            this.title = '行程结束';
            document.title = '行程结束';
            this.IsOrder = false;
            this.IsDriver = false;
            this.IsOrderTop = false;
            if (this.IsshowOrderTipTwo) {
              // 上车点marker
              this.showStartMarker();
              // 下车点marker
              this.showDestMarkder();
              this.$refs.map.createPathNavigator(this.startPoint, this.endPoint, '0').then(() => {
                this.mapInstance.setFitView();
              });
              this.mapInstance.setFitView();
              this.IsshowOrderTipTwo = false;
            }
            // if (this.IsgetGeolocation) {
            //     // 获取定位
            //     this.$refs.map.getGeolocation(this.startPoint);
            //     this.IsgetGeolocation = false
            // }
            clearInterval(this.timerOrder);
            this.timerOrder = null;
            // 评价状态
            this.pingjia = this.getOrderInfoData.evaluate_status; // 0 未评价 1 已评价
            if (this.pingjia === '0') {
              this.evalutePop = true;
              this.IsEndOrder = false;
              this.driverEvaluate = '评价司机';
            } else {
              this.evalutePop = false;
              this.IsEndOrder = true;
              this.driverEvaluate = '查看评价';
            }
            // 回显评价星星
            this.lookLevel = this.getOrderInfoData.level;
            // 回显评价星星描述
            this.lookEvaluateResulttext = this.getOrderInfoData.starTag;
            // 回显评价标签
            var tagPes = this.getOrderInfoData.tagPes;
            if (tagPes) {
              var tagPesarr = tagPes.split(',');
              for (var i = 0; i < tagPesarr.length; i++) {
                this.lookEvaluationList.push(tagPesarr[i]);
              }
              this.lookIsevaluationList = true;
            }
          } else if (this.currentStatus === '3') {
            // 订单已取消
            this.title = '行程取消';
            document.title = '行程取消';
            this.IsOrderTop = false;
            this.IsOrdercancel = true;
            if (this.IsshowOrderTipThree) {
              // 上车点marker
              this.showStartMarker();
              // 下车点marker
              this.showDestMarkder();
              this.mapInstance.setFitView();
              this.IsshowOrderTipThree = false;
            }
            if (this.getOrderInfoData.pay_status === '已退款') {
              this.cancelImg = require('@/assets/imgs/tk_wc@2x.png');
            } else {
              this.cancelImg = require('@/assets/imgs/tuikuanzhong@2x.png');
            }
            this.$refs.map.setCenter(this.startPoint);
            clearInterval(this.timerOrder);
            this.timerOrder = null;
          } else if (this.currentStatus === '4') {
            // 行程中
            this.title = '行程中';
            document.title = '行程中';
            this.IsOrder = false;
            this.IsDriver = true;
            this.IscancelOrder = false;
            this.IsOrdercancel = false;
            if (this.IsshowOrderTipFour) {
              this.Travelling();
              // 创建路线
              // this.$refs.map.createRoute(this.startPoint, this.endPoint);
              // 上车点marker
              // this.$refs.map.addMarker(this.startPoint, this.getOrderInfoData.origin, "2");
              // 下车点marker
              // this.$refs.map.addEndMarker(this.endPoint, this.getOrderInfoData.destination);
              // 同行乘客终点marker
              this.sameEndMarker();
              this.IsshowOrderTipFour = false;
            }
            this.tripTipText = '行程已经开始，请系好安全带，祝您旅途愉快！';
            this.isgonggaoboxative = false;
            this.isguanbiboxative = false;
          } else if (this.currentStatus === '5') {
            // 司机开始接驾
            this.title = '接驾中';
            document.title = '接驾中';
            this.IsOrder = false;
            this.IsDriver = true;
            this.IsOrdercancel = false;
            // this.tripTipText = "司机已经开始接驾，出发时间<em style='color:#FF6917;font-style:normal'>" + travelTimeStr + "</em>，请提前到上车点等待上车。"
            if (this.meetOthersStatus === '0') {
              // 没有同行乘客
              if (this.actualStatus === '1') {
                // 显示司机多少分钟到达起点
                if (this.getOrderInfoData.order_type === '拼车') {
                  this.tripTipText = '司机已经开始接驾，请做好出行准备，拼车请耐心等待。';
                } else {
                  this.tripTipText = '司机已经开始接驾，请做好出行准备，包车请耐心等待。';
                }
              } else if (this.actualStatus === '5') {
                // 司机已到达约定地点
                this.tripTipText = '司机已到达约定地点，请到上车点上车。';
              } else if (this.actualStatus === '2') {
                // 乘客已上车
                this.tripTipText = '司机正在接送拼友，请遵守接送顺序';
              } else if (this.actualStatus === '0') {
                // 开始接驾
                if (this.getOrderInfoData.order_type === '拼车') {
                  this.tripTipText = '司机已经开始接驾，请做好出行准备，拼车请耐心等待。';
                } else {
                  this.tripTipText = '司机已经开始接驾，请做好出行准备，包车请耐心等待。';
                }
              }
            } else {
              // 有同行乘客
              if (this.actualStatus === '1') {
                // 显示司机多少分钟到达起点
                if (this.getOrderInfoData.order_type === '拼车') {
                  this.tripTipText = '司机已经开始接驾，请做好出行准备，拼车请耐心等待。';
                } else {
                  this.tripTipText = '司机已经开始接驾，请做好出行准备，包车请耐心等待。';
                }
              } else if (this.actualStatus === '5') {
                // 司机已到达约定地点
                this.tripTipText = '司机已到达约定地点，请到上车点上车。';
              } else if (this.actualStatus === '2') {
                // 乘客已上车
                this.tripTipText = '司机正在接送拼友，请遵守接送顺序';
              } else if (this.actualStatus === '0') {
                // 开始接驾
                if (this.getOrderInfoData.order_type === '拼车') {
                  this.tripTipText = '司机已经开始接驾，请做好出行准备，拼车请耐心等待。';
                } else {
                  this.tripTipText = '司机已经开始接驾，请做好出行准备，包车请耐心等待。';
                }
              }
            }
            if (this.IsshowOrderTipFive) {
              // 创建路线
              this.Picking();
              // // 上车点marker
              // this.$refs.map.addMarker(this.startPoint, this.getOrderInfoData.origin, "2");
              // // 下车点marker
              // this.$refs.map.addEndMarker(this.endPoint, this.getOrderInfoData.destination);
              // 同行乘客起点marker
              this.sameStartMarker();
              // 同行乘客终点marker
              this.sameEndMarker();
              this.IsshowOrderTipFive = false;
            }
            this.isgonggaoboxative = false;
            this.isguanbiboxative = false;
          }
          // 是否显示乘车人
          if (this.getOrderInfoData.is_self === '0') {
            this.Isorder_type = false;
          }
          // 是否显示大件行李
          if (this.getOrderInfoData.remarks === '无' || this.getOrderInfoData.remarks === '') {
            this.Isremarks = false;
          }
          // 是否显示走高速
          if (this.getOrderInfoData.speed_status === '0' || this.getOrderInfoData.speed_status === '') {
            this.speedstatus = false;
          }
          // 投诉状态
          this.complaintStatus = this.getOrderInfoData.complaintStatus; // 0 未投诉 1 已投诉
          if (this.complaintStatus === '0') {
            this.complaints = '订单投诉';
          } else {
            this.complaints = '查看投诉';
          }
          // 是否显示同行乘客
          if (this.getOrderInfoData.order_type === '拼车') {
            this.IssameUsers = true;
            if (this.getOrderInfoData.allotSameUsers.length !== 0) {
              this.sameUsers = true;
            } else {
              this.sameUsers = false;
            }
          } else {
            this.IssameUsers = false;
          }
          // 检查是否电话约单 1 电话约单
          if (this.getOrderInfoData.order_source_id === '1') {
            this.bottomCancleType = false;
          }
          // 是否显示明星司机
          if (this.getOrderInfoData.driverSpan) {
            this.superDriver = true;
            this.superDriverText = this.getOrderInfoData.driverSpan;
          }
        });
      } else {
        Dialog.alert({
          title: '提示',
          content: '获取不到订单号',
          confirmText: '确定'
        });
      }
    },
    ...mapActions(['getOrderInfo']),
    showTripDriverInformation() {
      if (!this.IsshowTripInformation) {
        this.IsshowTripInformation = true;
      } else {
        this.IsshowTripInformation = false;
      }
    },
    strArray2NumArray(arr) {
      // 字符串数组转为数字数组
      return arr.map(item => {
        return parseFloat(item);
      });
    },
    closeTop() {
      this.IsOrderTop = false;
    },
    // 取消行程
    tripCancelBtn() {
      Dialog.confirm({
        title: '提示',
        content: '是否取消订单',
        confirmText: '确定',
        onConfirm: () => {
          this.tripCancelconfirm();
        }
      });
    },
    tripCancelconfirm() {
      let params = {
        order_no: this.$route.query.orderno,
        order_status: '3'
      };
      Loading.show();
      http.post('pakj/order/updateOrder', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.$router.push({
            name: 'TripCancel',
            query: {
              orderno: this.$route.query.orderno
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 安全专线
    safeBtn() {
      window.location.href = '/payedorder/safe?orderno=' + this.$route.query.orderno;
    },
    // 去评价或者查看评价
    getEvaluate() {
      if (this.pingjia === '0') {
        // 评价司机
        this.evalutePop = true;
        this.IsEndOrder = false;
        // this.$router.push({
        //     name: "Evaluate",
        //     query: {
        //         orderno: this.$route.query.orderno
        //     }
        // })
      } else {
        // 查看评价
        this.lookEvalutePop = true;
        this.IsEndOrder = false;
        // this.$router.push({
        //     name: "SeeEvaluate",
        //     query: {
        //         orderno: this.$route.query.orderno
        //     }
        // })
      }
    },
    // 同行乘客起点marker
    sameStartMarker() {
      if (this.getOrderInfoData.allotSameUsers) {
        this.sameStartPosition = [];
        for (var i in this.getOrderInfoData.allotSameUsers) {
          this.sameStartPosition.push({
            sameOriginCoord: this.getOrderInfoData.allotSameUsers[i].originCoord,
            sameUsersUserHeadpath: this.getOrderInfoData.allotSameUsers[i].userHeadpath
          });
        }
        // 同行乘客起点marker
        this.$refs.map.addSameMarker(this.sameStartPosition);
      }
    },
    // 同行乘客终点marker
    sameEndMarker() {
      if (this.getOrderInfoData.allotSameUsers) {
        this.sameDestPosition = [];
        for (var i in this.getOrderInfoData.allotSameUsers) {
          this.sameDestPosition.push({
            sameDestCoord: this.getOrderInfoData.allotSameUsers[i].destCoord,
            sameUsersUserHeadpath: this.getOrderInfoData.allotSameUsers[i].userHeadpath
          });
        }
        // 同行乘客终点marker
        this.$refs.map.addEndSameMarker(this.sameDestPosition);
      }
    },
    // 去投诉或者查看投诉结果
    complaintsBtn() {
      if (this.complaintStatus === '0') {
        // 投诉
        this.$router.push({
          name: 'Complaints',
          query: {
            orderno: this.$route.query.orderno
          }
        });
      } else {
        // 查看投诉
        this.$router.push({
          name: 'SeeComplaints',
          query: {
            orderno: this.$route.query.orderno
          }
        });
      }
    },
    // 获取评价星星
    getlevel(val) {
      this.IsevaluateStarText = false;
      this.IsevaluateResult = true;
      this.IsevaluationBtn = true;
      this.IsevaluationList = true;
      this.evaluationList = [];
      this.evaluationnewArr = [];
      this.evaluationArr = [];
      this.level = val + 1;
      for (var i in this.getOrderInfoData.orderEvaluate) {
        if (this.getOrderInfoData.orderEvaluate[i].level === this.level.toString()) {
          this.evaluateResulttext = this.getOrderInfoData.orderEvaluate[i].levelText;
          this.evaluationList = this.getOrderInfoData.orderEvaluate[i].levelSpanList;
        }
      }
      this.putevaluation();
    },
    getevaluationList(index, item) {
      for (let i = 0; i < this.evaluationArr.length; i++) {
        if (i === index) {
          this.evaluationArr[index] ? this.evaluationArr.splice(index, 1, false) : this.evaluationArr.splice(index, 1, true);
          if (this.evaluationArr[index]) {
            this.evaluationnewArr.push(this.evaluationList[index].levelLabelId);
          } else {
            this.removeArr(item.levelLabelId);
          }
        }
      }
      // console.log(this.evaluationnewArr);
    },
    queryIndexOf(item) {
      for (var i = 0; i < this.evaluationnewArr.length; i++) {
        if (this.evaluationnewArr[i] === item) {
          return i;
        }
      }
      return -1;
    },
    removeArr(item) {
      var index = this.queryIndexOf(item);
      if (index > -1) {
        this.evaluationnewArr.splice(index, 1);
      }
    },
    putevaluation() {
      for (let i = 0; i < this.evaluationList.length; i++) {
        this.evaluationArr.push(false);
      }
    },
    // 提交评价
    evaluationBtn() {
      if (this.evaluationnewArr.join(',').length === 0) {
        Toast({
          content: '请选择评价标签',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      var data = {
        orderNo: this.$route.query.orderno,
        evaluateLabel: this.evaluationnewArr.join(','), // 评价标签
        evaluateLevel: this.level.toString(), // 星级评价
        evaluateLevelText: this.evaluateResulttext // 星级评价描述
      };
      console.log(data);
      Loading.show();
      http.post('pakj/evaluate/submitOrderEvalt', data).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          Dialog.alert({
            title: '提示',
            content: '评价成功',
            confirmText: '确定',
            onConfirm: () => {
              this.$router.push({
                name: 'SuccessEvaluate'
              });
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 费用明细
    chargesBtn() {
      this.$router.push({
        name: 'ChargesDetails',
        query: {
          orderno: this.$route.query.orderno
        }
      });
    },
    // 联系司机
    callDriver() {
      window.location.href = 'tel://' + decryptByDESModeEBC(this.getOrderInfoData.driver_phone);
    },
    // 联系客服
    callCustomer() {
      window.location.href = 'tel://' + this.getOrderInfoData.service_phone;
    },
    initMqtt() {
      if (this.mqttClient) {
        if (this.mqttConnected) {
          return;
        }
      }
      this.$store
        .dispatch('getMqttConfig')
        .then(() => {
          if (this.mqttConfig) {
            this.$store
              .dispatch('initMqttClient', this.mqttConfig)
              .then(() => {
                this.mqttInited = true;
                this.mqttClient.onMessageArrived = this.onMessageArrive;
                this.mqttClient.onConnectionLost = this.onMqttLost;
                let topic = DRIVER_IN_ALLOT_TOPIC + this.getOrderInfoData.allot_id + '/';
                this.$store.dispatch('subscribe', topic).then(() => {
                  this.currentTopic = topic;
                });
              })
              .catch(reason => {
                console.error(reason);
              });
          }
        })
        .catch(reason => {
          console.error('无法获取MQTT配置');
        });
    },
    onMessageArrive(message) {
      let str = message.payloadString;
      let resultStr = decryptByDESModeEBC(str);
      let result = JSON.parse(resultStr);
      console.log('MQTT接受到消息：', result);
      if (result.position) {
        let positionStr = decryptByDESModeEBC(result.position);
        this.driverPosition = positionStr.split(',');
        this.hasMqtt = true;
        // TODO 接收到位置后调用地图的updateDriveCar方法
      }
    },
    onMqttLost(response) {
      this.hasMqtt = false;
      console.error('MQTT连接丢失，这有可能是消息内部处理出错!');
    },
    Picking() {
      // 接驾中
      console.log('当前订单状态：接驾中');
      this.currentRoutePositions = [];
      this.showStartMarker();
      this.showDestMarkder();
      this.mapInstance.setFitView();
    },
    Travelling() {
      // 行程中
      console.log('当前订单状态：行程中');
      this.showDestMarkder();
      this.removeStartMarker();
      this.mapInstance.setFitView();
    },
    showStartMarker() {
      if (!this.startMarker) {
        this.startMarker = new AMap.Marker({
          map: this.mapInstance,
          position: this.startPoint,
          offset: new AMap.Pixel(-10, -24),
          icon: new AMap.Icon({
            size: new AMap.Size(40, 48), // 图标尺寸
            image: process.env.BASE_URL + 'static/imgs/snyc_shangche_icon.png',
            imageSize: new AMap.Size(20, 24) // 根据所设置的大小拉伸或压缩图片
          })
        });
      }
      if (!this.startTextMarker) {
        this.startTextMarker = new AMap.Text({
          map: this.mapInstance,
          position: this.startPoint,
          text: '<div class="map-location-name">' + this.getOrderInfoData.origin + '</div>',
          style: {
            border: '0px',
            background: 'transparent',
            height: '35px'
          },
          offset: new AMap.Pixel(0, 15)
        });
      }
    },
    removeStartMarker() {
      if (this.startMarker) {
        this.mapInstance.remove(this.startMarker);
        this.startMarker = null;
      }
      if (this.startTextMarker) {
        this.mapInstance.remove(this.startTextMarker);
        this.startTextMarker = null;
      }
    },
    showDestMarkder() {
      if (!this.destMarker) {
        this.destMarker = new AMap.Marker({
          map: this.mapInstance,
          position: this.endPoint,
          offset: new AMap.Pixel(-10, -24),
          icon: new AMap.Icon({
            size: new AMap.Size(40, 48), // 图标尺寸
            image: process.env.BASE_URL + 'static/imgs/snyc_xiache_icon.png',
            imageSize: new AMap.Size(20, 24) // 根据所设置的大小拉伸或压缩图片
          })
        });
      }
      if (!this.destTextMarker) {
        this.destTextMarker = new AMap.Text({
          map: this.mapInstance,
          position: this.endPoint,
          text: '<div class="map-location-name">' + this.getOrderInfoData.destination + '</div>',
          style: {
            border: '0px',
            background: 'transparent',
            height: '35px'
          },
          offset: new AMap.Pixel(0, 15)
        });
      }
    },
    removeDestMarker() {
      if (this.destMarker) {
        this.mapInstance.remove(this.destMarker);
        this.destMarker = null;
      }
      if (this.destTextMarker) {
        this.mapInstance.remove(this.destTextMarker);
        this.destTextMarker = null;
      }
    },
    addTipInfoWindow(text, position) {
      // 上车点自定义信息窗体
      if (this.tipIndowWindow) {
        this.removeTipInfoWindow();
      }
      this.tipIndowWindow = new AMap.InfoWindow({
        isCustom: true,
        content:
          '<div>' +
          '<p style="background-color: #fff;font-size:12px;color:#4A4A4A;width:140px;height:34px;line-height:34px;border-radius:40px;text-align:center;margin:0px auto">' +
          text +
          '</p>' +
          '</div>',
        offset: new AMap.Pixel(0, -28)
      });
      this.tipIndowWindow.open(this.mapInstance, position);
    },
    removeTipInfoWindow() {
      if (this.tipIndowWindow) {
        this.tipIndowWindow.close();
        this.tipIndowWindow = null;
      }
    },
    /**
     * 1.74.0版本更新说明
     * 司机接驾中状态时，需要在地图中显示同行乘客
     * 接驾中地图线路规划为起点到终点的线路规划
     * 此方法处理接驾中的地图显示状态
     * 在currentStatus以及actualStatus的值发生变化后需要更新地图
     */
    updateMeetingStatus() {
      // 如果currentStatus为5，即待接驾
      if (this.currentStatus === '5') {
        this.$refs.map.removePathNavigator();
        this.$refs.map.createPathNavigator(this.startPoint, this.endPoint).then(() => {
          this.mapInstance.setFitView();
        });
        if (this.meetOthersStatus === '0') {
          // 没有其他同行乘客，司机接驾就接当前乘客
          if (this.actualStatus === '0') {
            // 开始接驾，规划起点到终点的路线信息
            this.addTipInfoWindow('司机正在接驾中', this.startPoint);
          } else if (this.actualStatus === '1') {
            // 更新状态文字，显示司机遇到多长时间到达
            this.$refs.map.createPathInfo(this.driverPosition, this.startPoint).then(info => {
              let text = '司机预计' + info.timeStr + '后到达';
              this.addTipInfoWindow(text, this.startPoint);
            });
          } else if (this.actualStatus === '2') {
            // 乘客已经上车
            this.addTipInfoWindow('正在接同行乘客', this.startPoint);
          } else if (this.actualStatus === '5') {
            // 司机已到达
            this.addTipInfoWindow('司机已到达', this.startPoint);
          }
        } else {
          if (this.actualStatus === '0') {
            // 开始接驾，规划起点到终点的路线信息
            this.addTipInfoWindow('正在接同行乘客', this.startPoint);
          } else if (this.actualStatus === '1') {
            // 更新状态文字，显示司机遇到多长时间到达
            this.$refs.map.createPathInfo(this.driverPosition, this.startPoint).then(info => {
              let text = '司机预计' + info.timeStr + '后到达';
              this.addTipInfoWindow(text, this.startPoint);
            });
          } else if (this.actualStatus === '2') {
            // 乘客已经上车
            this.addTipInfoWindow('正在接同行乘客', this.startPoint);
          } else if (this.actualStatus === '5') {
            // 司机已到达
            this.addTipInfoWindow('司机已到达', this.startPoint);
          }
        }
      }
    }
  },
  watch: {
    driverPosition(newVal, oldVal) {
      if (newVal !== '') {
        if (newVal.length > 1) {
          this.$refs.map.updateDriveCar(newVal);
        }
      }
    },
    userPosition(newVal, oldVal) {
      if (newVal !== '') {
        if (newVal.length > 1) {
          if (this.currentStatus === '0' || this.currentStatus === '1') {
            if (this.directPolyline) {
              this.$refs.map.updatePolyline(this.directPolyline, newVal, this.startPoint);
            } else {
              this.directPolyline = this.$refs.map.addPolyline(newVal, this.startPoint);
              this.mapInstance.setFitView();
            }
          } else {
            if (this.directPolyline) {
              this.mapInstance.remove(this.directPolyline);
              this.directPolyline = null;
            }
          }
        }
      }
    },
    actualStatus(newVal, oldVal) {
      console.log('actualStatus值发生变化');
      this.updateMeetingStatus();
    },
    meetOthersStatus(newVal, oldVal) {
      console.log('meetOthersStatus值发生变化');
      this.updateMeetingStatus();
    },
    currentStatus(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.removeTipInfoWindow();
        this.$refs.map.removePathNavigator();
        this.hasPathNavigator = false;
        if (newVal === '4') {
          // 行程中
          this.initMqtt();
          this.$refs.map.clearWatchLocation();
          if (this.directPolyline) {
            this.mapInstance.remove(this.directPolyline);
            this.directPolyline = null;
          }
          this.$refs.map.createPathNavigator(this.driverPosition, this.endPoint).then(() => {
            this.$refs.map.updateDriveCar(this.driverPosition, '3');
            this.hasPathNavigator = true;
            this.mapInstance.setFitView();
          });
        } else if (newVal === '5') {
          // 接驾中
          this.initMqtt();
          this.$refs.map.clearWatchLocation();
          if (this.directPolyline) {
            this.mapInstance.remove(this.directPolyline);
            this.directPolyline = null;
          }
          this.updateMeetingStatus();
        } else if (newVal === '2' || newVal === '3') {
          this.$store.commit('closeMqtt');
          this.$refs.map.clearWatchLocation();
        } else if (newVal === '1' || newVal === '0') {
          this.addTipInfoWindow('在这里上车', this.startPoint);
          this.$refs.map.watchLocation(
            data => {
              this.userPosition = data;
            },
            reason => {
              console.log(reason.message);
            }
          );
        }
      }
    }
  },
  computed: {
    ...mapGetters(['getOrderInfoData', 'mqttConfig', 'mqttClient', 'mqttConnected']),
    userPhone() {
      var str = this.getOrderInfoData;
      if (!str) {
        return '';
      }
      return decryptByDESModeEBC(str.passenger_phone);
    },
    getTime() {
      var str = this.getOrderInfoData;
      var startMoment = '';
      if (!str) {
        return '';
      }
      let momstart = moment(str.travel_time, 'x');
      startMoment = momstart.calendar(null, {
        sameDay: '[今天] HH:mm',
        nextDay: '[明天] HH:mm',
        nextWeek: 'dddd HH:mm',
        lastDay: '[昨天] HH:mm',
        lastWeek: '[上] ddd HH:mm',
        sameElse: 'MMMDo HH:mm'
      });
      let endMoment = moment(str.travel_end_time, 'x').format('HH:mm');
      return startMoment + '~' + endMoment;
    },
    cancelCharge() {
      var str = this.getOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.cancel_fee_flag === '1') {
        // 1是有责 2是无责
        return "此订单有责取消，收取<span style='color:#FF6917'>" + str.orderPoundage + '</span>的手续费';
      } else {
        return '此订单为无责取消，全额退款！';
      }
    },
    cancelText() {
      var str = this.getOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.pay_status === '已退款') {
        return '订单退款已完成';
      } else {
        return '订单正在退款中';
      }
    },
    getstartRoute() {
      var str = this.getOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.start_route.length > 3) {
        return str.start_route.substring(0, 3) + '...';
      } else {
        return str.start_route;
      }
    },
    getendRoute() {
      var str = this.getOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.end_route.length > 3) {
        return str.end_route.substring(0, 3) + '...';
      } else {
        return str.end_route;
      }
    },
    getorigin() {
      var str = this.getOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.origin.length > 22) {
        return str.origin.substring(0, 22) + '...';
      } else {
        return str.origin;
      }
    },
    getdestination() {
      var str = this.getOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.destination.length > 22) {
        return str.destination.substring(0, 22) + '...';
      } else {
        return str.destination;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
#orderDetail {
  p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .sharecover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    z-index: 9999;
  }

  .code_box {
    position: absolute;
    z-index: 10000;
    top: 35%;
    left: 35%;
  }

  .qrcode_text {
    font-size: 28px;
    color: #fff;
    marign-top: 20px;
  }

  .share_box {
    position: absolute;
    z-index: 10000;
    right: 2%;
    font-size: 28px;
    color: #fff;
    width: 240px;
  }

  .share_box img {
    width: 120px;
    position: relative;
    left: 100px;
  }

  .share_box p {
    margin-top: 10px;
  }

  .top_bar {
    position: absolute;
    top: 0px;
    z-index: 1000;
    width: 100%;
  }

  .orderTop {
    background-color: #F8F8F8;
    width: 100%;
    box-shadow: 0px 4px 6px 0px rgba(191, 191, 191, 0.5);
    opacity: 0.8;
    padding: 10px 0px;
  }

  .orderTop p {
    display: flex;
    align-items: center;
    margin: 0px 30px;
    font-size: 24px;
    color: #666;
    padding-top: 10px;
  }

  .gonggao_box {
    display: inline-block;
    text-align: center;
    float: left;
    margin-right: 18px;
  }

  .gonggaoboxative {
    margin-top: 12px;
  }

  .gonggao_icon {
    width: 32px;
    height: 32px;
  }

  .gonggao_text {
    width: 602px;
    display: inline-block;
    float: left;
  }

  .gonggao_text em {
    color: #FF6917;
    font-style: normal;
  }

  .guanbi_box {
    display: inline-block;
    text-align: center;
    float: left;
    margin-left: 18px;
  }

  .guanbiboxative {
    margin-top: 15px;
  }

  .guanbi {
    width: 20px;
    height: 20px;
  }

  .order_information_box {
    position: absolute;
    bottom: 20px;
    z-index: 1001;
    width: 100%;
  }

  .order_information {
    background-color: #fff;
    border-radius: 10px;
    margin: 0px 20px;
  }

  .dingwei {
    margin-left: 30px;
  }

  .dingwei img {
    width: 56px;
    height: 56px;
  }

  .orderinformation_list {
    padding-top: 20px;
    position: relative;
  }

  .orderinformation_list li {
    margin: 0px 30px;
    font-size: 24px;
    color: #666;
    margin-top: 10px;
  }

  .orderinformation_list li span {
  }

  .orderinformation_list li em {
    font-size: 20px;
    color: #999;
    border: solid 1px #E0E0E0;
    padding: 4px 10px;
    margin-left: 20px;
    font-style: normal;
    border-radius: 7px;
    position: relative;
    bottom: 3px;
  }

  .snkc_xcqx_time {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    bottom: 1px;
  }

  .shangchedian {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    bottom: 3px;
  }

  .orderinformation_bottom {
    border-top: solid 1px #E0E0E0;
    margin-top: 24px;
    padding: 0px 30px;
  }

  .orderinformation_bottom ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .orderinformation_bottom ul li {
    margin-top: 30px;
    font-size: 24px;
    color: #666;
    padding-bottom: 30px;
  }

  .quxiao_icon {
    width: 24px;
    height: 24px;
    position: relative;
    top: 3px;
    margin-right: 8px;
  }

  .driver_information {
    position: absolute;
    bottom: 20px;
    z-index: 1001;
    width: 100%;
  }

  .driver_information_box {
    background-color: #fff;
    border-radius: 10px;
    margin: 0px 20px;
  }

  .show_trip {
    padding-top: 20px;
  }

  .show_trip p {
    width: 88px;
    height: 1px;
    background-color: #E0E0E0;
    margin: 8px auto 0px auto;
  }

  .driver_box {
    padding: 10px 30px;
  }

  .driver_photo {
    float: left;
  }

  .driver_photo p img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .super_driver {
    position: absolute;
    bottom: -20px;
    left: -7px;
    z-index: 10;
    font-size: 18px;
    color: #fff;
    background-color: #6E6E6E;
    width: 100%;
    padding: 2px 5px;
  }

  .driver_car {
    float: left;
  }

  .driver_car p {
    margin-top: 10px;
    margin-left: 24px;
  }

  .driver-name {
    font-size: 30px;
    color: #333;
  }

  .stars {
    margin-left: 16px;
  }

  .stars i {
    display: inline-block;
    width: 24px;
    height: 22px;
    background: url('../../assets/imgs/xcxq_icon_xing_dark@2x.png') no-repeat center center;
    background-size: 24px 22px;
  }

  .stars i.active {
    background-image: url('../../assets/imgs/xcxq_icon_xing_light@2x.png');
  }

  .dirver-score {
    font-size: 26px;
    color: #666;
    margin-left: 16px;
  }

  .car-number {
    font-size: 26px;
    color: #666;
  }

  .car-brand {
    font-size: 26px;
    color: #999;
    margin-left: 16px;
  }

  .driver_phone {
    float: right;
    margin-top: 28px;
  }

  .driver_phone span {
    margin-left: 10px;
  }

  .driver_phone span img {
    width: 44px;
    height: 44px;
  }

  .Colleague_per {
    border-top: solid 1px #E0E0E0;
    margin-top: 24px;
    padding: 0px 30px;
  }

  .Colleague_per ul li {
    float: left;
    margin-top: 16px;
    margin-left: 20px;
  }

  .Colleague_per ul li p {
    font-size: 24px;
    color: #666;
    position: relative;
    top: 10px;
    right: 20px;
  }

  .Colleague_per ul li img {
    height: 48px;
    width: 48px;
    border-radius: 50%;
  }

  .colleague_no {
    border-top: solid 1px #E0E0E0;
    margin-top: 24px;
    padding: 0px 30px;
  }

  .colleague_no p {
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 24px;
    color: #666;
    margin-top: 10px;
  }

  .colleague_no p img {
    width: 24px;
    height: 24px;
    position: relative;
    top: 4px;
    right: 8px;
  }

  .orderinformation_box {
    border-top: solid 1px #E0E0E0;
    margin-top: 24px;
  }

  .safe_box {
    margin: 10px 20px;
  }

  .dingwei_img {
    text-align: left;
  }

  .safe_box_img {
    float: right;
  }

  .safe_box img {
    width: 56px;
    height: 56px;
  }

  .end_order {
    position: absolute;
    bottom: 20px;
    z-index: 1001;
    width: 100%;
  }

  .end_order_box {
    background-color: #fff;
    border-radius: 10px;
    margin: 0px 20px;
    padding-top: 20px;
  }

  .endOrder_bottom {
    border-top: solid 1px #E0E0E0;
    margin-top: 24px;
  }

  .endOrder_bottom ul li {
    width: 50%;
    float: left;
    margin-top: 30px;
    font-size: 24px;
    color: #666;
    padding-bottom: 30px;
    text-align: center;
  }

  .endOrdermoney {
    border-top: solid 1px #E0E0E0;
    text-align: center;
    padding-top: 68px;
    padding-bottom: 52px;
  }

  .money_alt {
    font-size: 40px;
    color: #333;
  }

  .endOrdercharges {
    font-size: 24px;
    color: #999;
    margin-top: 10px;
  }

  .driver_evaluate {
    border-top: solid 1px #E0E0E0;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
  }

  .starWrap {
    margin-top: 10px;
  }

  .starText {
    font-size: 28px;
    color: #333;
    margin-top: 10px;
  }

  .starWrap img {
    width: 65px;
    padding-left: 15px;
  }

  .evaluate_hd {
    background-color: #fff;
    font-size: 28px;
    color: #666;
    position: absolute;
    left: 50%;
    margin-left: -108px;
    top: -22px;
  }

  .evaluationList {
    padding: 0px 100px 0px 70px;
  }

  .evaluationList_one {
    height: 350px;
    overflow: auto;
  }

  .evaluationList li {
    width: 255px;
    height: 72px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    text-align: center;
    line-height: 72px;
    margin-top: 20px;
    font-size: 28px;
    color: #666;
    float: left;
    margin-left: 30px;
  }

  .evaluationList li.evaluation-active {
    border: 1px solid #ff6917;
    color: #ff6917;
  }

  .complaints_input {
    background-color: #fff;
    margin: 20px 30px 16px 30px;
    border: solid 1px #eee;

    .input_calc {
      font-size: 24px;
      color: rgba(153, 153, 153, 1);
      line-height: 24px;
      width: 100%;
      text-align: right;
    }
  }

  .complaints_input textarea {
    border: none;
    resize: none;
    font-size: 26px;
    width: 94%;
    height: 120px;
    padding: 10px 3%;
    outline: none;
  }

  .evaluationBtn {
    background-color: #FF6917;
    margin: 50px 20px 0px 20px;
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
  }

  .driver_evaluate p {
    font-size: 26px;
    color: #FF6917;
  }

  .cancelmoney {
    position: absolute;
    right: 20px;
    bottom: 0px;
    font-size: 36px;
    color: #333;
  }

  .xc_question {
    width: 24px;
    height: 24px;
    margin-left: 10px;
  }

  .orderinformation_bottom p {
    text-align: center;
  }

  .cancel_img {
    margin-top: 40px;
  }

  .cancel_img img {
    width: 60px;
    height: 60px;
  }

  .cancel_text {
    margin-top: 20px;
    font-size: 28px;
    color: #444;
  }

  .cancel_Charge {
    font-size: 26px;
    color: #999;
    margin-top: 10px;
    padding-bottom: 42px;
  }

  .back_btn {
    width: 22px;
    height: 38px;
  }

  .cancel_Charge span {
    color: #FF6917;
  }

  .rules_ct {
    background-color: #fff;
  }

  .look_rules_ct {
    background-color: #fff;
  }

  .evaluation_c_hd {
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    height: 80px;
    line-height: 80px;
    font-size: 28px;
    color: #333;
    padding: 0px 30px;
    margin-top: 20px;
  }

  .evaluation_c {
    font-size: 26px;
    color: #666;
    padding: 0px 30px;
    margin-top: 20px;
  }
}
</style>
